<div
  d-file-drop
  [enableDrop]="enableDrop"
  [isSingle]="true"
  (fileDrop)="onFileDrop($event)"
  (fileOver)="onFileOver($event)"
  (fileSelect)="onFileSelect($event)"
  [ngStyle]="{ border: isDropOVer ? '1px solid #15bf15' : '0' }"
  style="display: flex"
>
  <div
    class="devui-input-group"
    [class.disabled]="this.disabled || dSingleUploadView.fileUploaders[0]?.status === UploadStatus.uploading"
    [class.with-button]="!withoutBtn"
    (click)="onClick($event)"
  >
    <div class="devui-form-control devui-files-list">
      <div *ngIf="!filename" class="devui-file-item devui-upload-placeholder">
        {{ placeholderText ? placeholderText : i18nText?.chooseFile }}
      </div>
      <div *ngIf="!!filename" class="devui-file-tag devui-file-item" title="{{ filename }}">
        <span class="devui-filename {{ dSingleUploadView.fileUploaders[0]?.status === UploadStatus.failed ? 'devui-failed-color' : '' }}">
          {{ filename }}
        </span>
        <span
          class="icon devui-upload-remove
            {{ dSingleUploadView.fileUploaders[0]?.status === UploadStatus.failed ? 'devui-upload-delete-file-button' : '' }}
            {{
            dSingleUploadView.fileUploaders[0]?.status === UploadStatus.uploading ||
            dSingleUploadView.fileUploaders[0]?.status === UploadStatus.uploaded
              ? 'devui-uploading-delete'
              : ''
          }}"
          (click)="deleteFile($event)"
        >
          <svg
            width="16px"
            height="16px"
            viewBox="0 0 16 16"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
          >
            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <g transform="translate(-270.000000, -2376.000000)">
                <g transform="translate(198.000000, 1991.000000)">
                  <g transform="translate(0.000000, 383.000000)">
                    <g transform="translate(72.000000, 2.000000)">
                      <path
                        d="M4.570404,4.06442993 L4.6207661,4.10650663 L8,7.48581818 L11.3792339,4.10650663 C11.5212427,3.96449779 11.7514845,3.96449779 11.8934934,4.10650663 C12.0197234,4.2327367 12.033749,4.42868172 11.9355701,4.570404 L11.8934934,4.6207661 L8.51418182,8 L11.8934934,11.3792339 C12.0355022,11.5212427 12.0355022,11.7514845 11.8934934,11.8934934 C11.7672633,12.0197234 11.5713183,12.033749 11.429596,11.9355701 L11.3792339,11.8934934 L8,8.51418182 L4.6207661,11.8934934 C4.47875727,12.0355022 4.24851546,12.0355022 4.10650663,11.8934934 C3.98027655,11.7672633 3.96625099,11.5713183 4.06442993,11.429596 L4.10650663,11.3792339 L7.48581818,8 L4.10650663,4.6207661 C3.96449779,4.47875727 3.96449779,4.24851546 4.10650663,4.10650663 C4.2327367,3.98027655 4.42868172,3.96625099 4.570404,4.06442993 Z"
                      ></path>
                    </g>
                  </g>
                </g>
              </g>
            </g>
          </svg>
        </span>
        <div *ngIf="dSingleUploadView.fileUploaders[0]?.status === UploadStatus.uploading" class="icon devui-upload-progress">
          <d-progress
            [type]="'circle'"
            [percentage]="dSingleUploadView.fileUploaders[0].percentage"
            [strokeColor]="'#029931'"
            [strokeWidth]="8"
            [showContent]="false"
          >
          </d-progress>
        </div>
        <span *ngIf="dSingleUploadView.fileUploaders[0]?.status === UploadStatus.failed" class="icon icon-running" (click)="upload()">
        </span>
        <span *ngIf="dSingleUploadView.fileUploaders[0]?.status === UploadStatus.uploaded" class="icon icon-right"></span>
      </div>
    </div>
    <span class="devui-input-group-addon">
      <svg class="svg-icon-dot" height="1em" width="1em" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
        <path
          d="m400.31892 176.970574c0-61.574381 50.113351-111.680569 111.679545-111.680569 61.576427 0 111.680569 50.106188 111.680569 111.680569 0 61.568241-50.104141 111.679545-111.680569 111.679545-61.566194 0-111.679545-50.111304-111.679545-111.679545zm0 335.028403c0-61.568241 50.113351-111.678522 111.679545-111.678522 61.576427 0 111.680569 50.110281 111.680569 111.678522 0 61.574381-50.105165 111.682615-111.680569 111.682615-61.566194 0-111.679545-50.108235-111.679545-111.682615zm0 335.037612c0-61.572334 50.113351-111.679545 111.679545-111.679545 61.575404 0 111.680569 50.107211 111.680569 111.679545 0 61.567217-50.105165 111.672382-111.680569 111.672382-61.566194 0-111.679545-50.105164-111.679545-111.672382zm0 0"
        />
      </svg>
    </span>
  </div>
  <d-button
    *ngIf="!autoUpload && !withoutBtn"
    (btnClick)="upload()"
    bsStyle="common"
    [style.margin-left.px]="8"
    [disabled]="
      disabled ||
      dSingleUploadView.uploadedFilesComponent.uploadedFiles.length > 0 ||
      dSingleUploadView.fileUploaders[0]?.status === UploadStatus.uploading
    "
  >
    <span *ngIf="!dSingleUploadView.fileUploaders[0] || dSingleUploadView.fileUploaders[0]?.status === UploadStatus.preLoad">{{
      uploadText || i18nText?.upload
    }}</span>
    <span *ngIf="dSingleUploadView.fileUploaders[0]?.status === UploadStatus.uploading">{{ i18nText?.uploading }}</span>
    <span *ngIf="dSingleUploadView.fileUploaders[0]?.status === UploadStatus.uploaded">{{ i18nText?.uploaded }}</span>
    <span *ngIf="dSingleUploadView.fileUploaders[0]?.status === UploadStatus.failed">{{ i18nText?.uploadFailed }}</span>
  </d-button>
</div>
<ng-container *ngIf="showTip">
  <div class="devui-upload-tip">
    <span *ngIf="dSingleUploadView.fileUploaders[0]?.status === UploadStatus.uploading" class="devui-loading">
      {{ i18nText?.uploading }}
    </span>
    <div *ngIf="dSingleUploadView.fileUploaders[0]?.status === UploadStatus.uploaded" class="devui-loaded">
      <i class="icon icon-right-o"></i>
      <span style="vertical-align: middle">{{ i18nText?.uploadSuccess }}</span>
    </div>
    <div *ngIf="dSingleUploadView.fileUploaders[0]?.status === UploadStatus.failed" class="devui-upload-failed">
      <i class="icon icon-info-o"></i>
      <span style="vertical-align: middle">
        <span style="margin-right: 8px">{{ i18nText?.uploadFailed }}</span>
        <a (click)="upload()">{{ i18nText?.reUpload }}</a>
      </span>
    </div>
  </div>
</ng-container>
<d-single-upload-view
  #dSingleUploadView="dSingleUploadView"
  [uploadOptions]="uploadOptions"
  [filePath]="filePath"
  [uploadedFiles]="uploadedFiles"
  [uploadedFilesRef]="uploadedFilesRef"
  [preloadFilesRef]="preloadFilesRef"
  [dynamicUploadOptionsFn]="dynamicUploadOptionsFn"
  (deleteUploadedFileEvent)="_onDeleteUploadedFile($event)"
>
</d-single-upload-view>
